<template>
  <div class="nav">
    <ul class="nav-ul">
      <li class="nav-li" v-for="(items,index) in nav" :key="index">{{ items }}</li>
    </ul>
    <span class="drop-arrow iconfont icon-xiala"></span>
  </div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {
      nav: ["推荐", "手机", "智能", "电视", "笔记本", "家电", "生活周边"]
    };
  },
  method() {}
};
</script>
<style lang="scss">
$base: 50;
.nav {
  font-size: 30rem / $base;
  color: #7d7d7d;
  position: fixed;
  top: 200rem / $base;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  .nav-ul {
    &::-webkit-scrollbar {
      display: none;
    }
    margin-left: 36rem / $base;
    overflow-x: scroll;
    white-space: nowrap;
    min-width: 13rem;
    padding: 20rem / $base 30rem / $base 0 0;
    li {
      display: inline-block;
      margin-right: 60rem / $base;
      padding-bottom: 20rem / $base;
      &:nth-child(1) {
        border-bottom: 4rem / $base solid #ed5b00;
      }
    }
  }
  .drop-arrow {
    position: absolute;
    top: 25rem / $base;
    right: 20rem / $base;
    font-size: 30rem / $base;
    z-index: 100;
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: -8rem / $base;
      left: -20rem / $base;
      width: 70rem / $base;
      height: 50rem / $base;
      background-color: #f2f2f2;
      z-index: -1;
      box-shadow: -15rem / $base 0 15rem / $base 0 #f2f2f2;
    }
  }
}
</style>